<template>
	<view class="notice-detail-container">
		<view class="n-title">{{detailData.title}}</view>
		<view class="intro">
			<text class="time">{{detailData.time}}</text>
			<view class="line"></view>
			<text class="item">{{detailData.projectName}}</text>
		</view>
		
		<view class="n-detail" v-html="detailData.html"></view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import {getWNoticeListDetail} from '@/api_request/api';
	
	const detailData = reactive({
		projectName: '',
		time: '',
		title: '',
		html: '',
		tag: '<p>hhahahhahhha</p>'
	})
	
	onLoad((option) => {
		getDetailInfo(option)
	})
	
	const getDetailInfo = async (val:any)=> {
		const {data, code, message} = await getWNoticeListDetail({id: val.id});
		if(code == 200) {
			detailData.time = data.published_at;
			detailData.title = data.title;
			detailData.projectName = data.community_text;
			renderHtml(data.content)
		}else {
			uni.$showMsg(message)
		}
	}
	
	const renderHtml = (val:[])=> {
		detailData.html = renderNodes(val);
		console.log('==================234234', detailData.html);
	}
	const renderNode = (node:any)=> {
		if (typeof node === 'string') {
			if (node.indexOf('<br/>') > -1 || node.indexOf('<script>') > -1) {
				return '';
			}

			return node;
		}

		const { tag, children, attrs } = node;
		const attrsArr:[] = [];

		if (tag === 'script') {
			return '';
		}
		if(tag == 'p') {
			attrs.push({name: 'style', value: 'text-indent: 2em; font-size: 28rpx; color: #515A6E; line-height: 48rpx;'})
		}
		
		if(tag == 'img') {
			attrs.push({name: 'style', value: 'width: 100%; height: auto;margin: 16px 0;'})
		}

		if (Array.isArray(attrs)) {
			attrs.forEach(({ name, value }) => {
				attrsArr.push(`${name}="${value}"`);
			});
		}

		return `<${tag} ${attrsArr.join(' ')}>${renderNodes(children)}</${tag}>`;
	}
	const renderNodes = (nodes:[])=> {
		if (!Array.isArray(nodes)) {
			return '';
		}

		return nodes.map(item => renderNode(item)).join('');
	}
	
</script>

<style lang="scss" scoped>
	.notice-detail-container {
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		width: 100%;
		min-height: 100%;
		
		.n-title {
			height: 36rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #3D3D3D;
		}
		
		.intro {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			
			.item {
				font-size: 28rpx;
				color: $cus-color-1;
				max-width: 400rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.line {
				height: 28rpx;
				border-left: 2rpx solid #8091A4;
				margin: 0 20rpx;
			}
			
			.time {
				font-size: 28rpx;
				color: $cus-color-8;
				white-space: nowrap;
			}
		}
		
		.n-detail {
			margin-top: 44rpx;
			font-size: 28rpx;
			color: #515A6E;
		}
	}
</style>